<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>

<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/user/list"><Icon type="ios-list"></Icon> 奖励</BreadcrumbItem>
                <BreadcrumbItem to="/user/list"><Icon type="ios-copy-outline"></Icon> 奖励明细</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules" :label-width="80">
            <Alert type="success">注意：每月7号为积分入账时间，奖励按订单完成时间为准。</Alert>
            <Row>
                <Col span="10">
                    <Row>
                        <Col span="12">
                            <FormItem label="时间范围：" prop="date_s">
                                <DatePicker :disabled="hasSubmit" type="date" placeholder="开始时间" prop="date_s" v-model="searchForm.date_s"></DatePicker>
                            </FormItem>

                        </Col>
                        <Col span="1" style="text-align: center">-</Col>
                        <Col span="7">
                            <FormItem :label-width="1" prop="date_e">
                                <DatePicker :disabled="hasSubmit" type="date" placeholder="结束时间" prop="date_e" v-model="searchForm.date_e"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Col>
                <Col span="4">
                    <FormItem label="奖励类型：" prop="cate">
                        <Select v-model="searchForm.cate">
                            <Option value="1">奖励入账</Option>
                            <Option value="2">提现减扣</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem>
                        <Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" icon="search">查询</Button>
                        <Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Row>
            <Table border :columns="columns" :data="list"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page
                            :total="total"
                            :current="current"
                            :page-size="pageSize"
                            :show-elevator="true"
                            :page-size-opts="[12, 20, 30, 40]"
                            :show-sizer="true"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                    ></Page>
                </div>
            </div>
        </Row>
    </Card>
</template>
<script>
    import Cookies from 'js-cookie';
    import Util from '../../libs/util';
    import moment from 'moment';

    export default {
        data () {
            return {
                columns: [
                    {
                        title: '类型',
                        key: 'type_text'
                    },
                    {
                        title: '项目',
                        key: 'cate_text'
                    },
                    {
                        title: '交易前积分',
                        key: 'point_before'
                    },
                    {
                        title: '交易额',
                        key: 'point'
                    },
                    {
                        title: '交易后积分',
                        key: 'point_after'
                    },
                    {
                        title: '补充说明',
                        key: 'description'
                    },
                    {
                        title: '交易时间',
                        key: 'create_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.create_time));
                        }
                    }
                ],
                month: '',
                data: '',
                admin_type: Cookies.get('admin_type'),
                hasSubmit: false,
                searchForm: {
                    date_s: '',
                    date_e: '',
                    type: '',
                    cate: ''
                },
                searchFormRules: {
                },
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 12,
                total: 0,
                list: [],
                pointTotal: 0
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
            });
        },
        methods: {
            getList: function (params) {
                let _this = this;
                let p = {
                    ...params
                }
                Util.ajax.post(`/adminapi/reward/kpilog`, p).then(response => {
                    if(response.data.code==0) {
                        _this.list = response.data.data.list;
                        _this.searchForm.month_date = response.data.data.month_date;
                        _this.pointTotal = response.data.data.point_total;
                    }
                }).catch( function (error) {
                    _this.disabled = false;
                    _this.$Message.error('网络请求失败');
                });
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = {
                            ...this.searchForm,
                            page: 1,
                            pageSize: this.pageSize
                        };
                        params.date_s = params.date_s ? moment(params.date_s).format('X') : '';
                        params.date_e = params.date_e ? moment(params.date_e).format('X') : '';
                        this.getList(params);
                    } else {
                        this.searchBrnLoading = false;
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.searchForm = {
                    month_date: '',
                    type: ''
                };
                this.hasSubmit = false;
                this.getList();
            },
            changePage (e) {
                this.loading = true;
                const params = {page: e, pageSize: this.pageSize};
                this.list = this.getList(params);
            },
            changePageSize (e) {
                this.loading = true;
                const params = {page: 1, pageSize: e};
                this.list = this.getList(params);
            }
        }
    };
</script>
<style>
    .show {color: red;font-style: normal;}
</style>
